import React from "react";
import { FlatList, Image, StyleSheet, Text } from "react-native";
import { TouchableOpacity, View } from "react-native-ui-lib";
import { commonStyles } from "../../configs/commonStyle";
import NavigationBar from "../common/NavigationBar";
import BasePage from "../BasePage";
import { IconImage } from "../../utils";
import { windowWidth } from "../../configs/platform";
import navigator from "../../utils/navigator";
import ListSeparator from "../common/ListSeparator";
import { checkCameraPermission, logger } from "../../utils/util";
import WatermarkView from "../components/WatermarkView";
import { inject, observer } from "mobx-react";
import { Badge } from "react-native-elements";

/**
 * 功能
 */
@inject("userStore")
@observer
export default class Features extends BasePage {

  constructor(props) {
    super(props);
    const { permissionList } = props.userStore
    const menuList = [
      {
        label: "扫描二维码",
        icon: IconImage.menu_scan,
        page: "ScanPage",
      },
      {
        label: "订单地图",
        icon: IconImage.menu_map,
        page: "MapOrder",
      },
      {
        label: "异常配送列表",
        icon: IconImage.menu_error_order,
        page: "AbnormalDelivery",
      },
      {
        label: "超时订单",
        icon: IconImage.menu_outtime,
        page: "TimeoutOrder",
      },
      {
        label: "投诉订单",
        icon: IconImage.menu_complaint_order,
        page: "ComplaintOrderMgr",
      },
      {
        label: "异常工单",
        icon: IconImage.menu_complaint_gd,
        page: "WorkOrder",
      },
      {
        label: "我的评分",
        icon: IconImage.menu_score,
        page: "MyScore",
      },
      {
        label: "中转中心",
        icon: IconImage.icon_home_checked,
        page: "TransferCenter",
      },
      {
        label: "录音待上传",
        icon: IconImage.ic_to_upload,
        page: "UploadFailRecord",
      },
      
    ]
    if (permissionList && permissionList.includes('seekOrder')) {
      menuList.push({
        label: "咨询工单",
        icon: IconImage.menu_complaint_order,
        page: "SeekOrder",
      })
    }
    this.state = {
      menuList,
    };
  }


  render_item = (item, index, unUploadNum,timeOrderCount,complaintOrderCount,seekOrderCount) => {
    return (
      <TouchableOpacity
        activeOpacity={1}
        onPress={async () => {
          if (item.page == "ScanPage") {
            let permission = await checkCameraPermission();
            if (permission == false) {
              this.permissionDialog.show("扫描订单需要获得相机使用权限，请开启");
              return;
            }
          }
          navigator.navigate(item.page, { ...item.params });
        }}
        style={styles.menu}>
        <View style={{ ...styles.menu_container, backgroundColor: item.bgColor }}>
          <View center>
            <Image
              source={item.icon}
              style={{ width: 40, height: 40, marginBottom: 8 }}
            />
            {item.page == "UploadFailRecord" &&
            unUploadNum > 0 ? (
              <Badge
                status={"error"}
                size={18}
                value={String(unUploadNum)}
                containerStyle={{
                  position: "absolute",
                  top: 0,
                  right: 0,
                }}
              />
            ) : null}
            {item.page == "TimeoutOrder" &&
            timeOrderCount > 0 ? (
              <Badge
                status={"error"}
                size={18}
                value={String(timeOrderCount)}
                containerStyle={{
                  position: "absolute",
                  top: 0,
                  right: 0,
                }}
              />
            ) : null}
            {item.page == "ComplaintOrderMgr" &&
            complaintOrderCount > 0 ? (
              <Badge
                status={"error"}
                size={18}
                value={String(complaintOrderCount)}
                containerStyle={{
                  position: "absolute",
                  top: 0,
                  right: 0,
                }}
              />
            ) : null}
            {item.page == "SeekOrder" &&
            seekOrderCount > 0 ? (
              <Badge
                status={"error"}
                size={18}
                value={String(seekOrderCount)}
                containerStyle={{
                  position: "absolute",
                  top: 0,
                  right: 0,
                }}
              />
            ) : null}
            <Text style={commonStyles.text_black}>
              {item.label}
            </Text>
          </View>
        </View>
      </TouchableOpacity>
    );
  };

  render() {
    const { menuList } = this.state;
    const { uploadFailList, userInfo,timeOrderCount,complaintOrderCount, seekOrderCount } = this.props.userStore;
    logger('参数2',timeOrderCount,complaintOrderCount)
    let unUploadNum = 0;
    if (uploadFailList && uploadFailList.length) {
      const unUploadList = uploadFailList.filter(data => data.distributorId == userInfo.distributorId);
      unUploadNum = unUploadList.length;
    }
    return (
      <View useSafeArea style={commonStyles.body_primary}>
        <NavigationBar
          title={"功能"}
          backgroundColor={"transparent"}
        />
        <View flex>
          <WatermarkView />
          <View style={StyleSheet.absoluteFill} pointerEvents={"box-none"}>
            <FlatList
              data={menuList}
              onRefresh={this._renderRefresh}
              showsVerticalScrollIndicator={false}
              extraData={this.state}
              style={{}}
              keyExtractor={(item, index) => "pro_" + index}
              renderItem={({ item, index }) => this.render_item(item, index, unUploadNum,timeOrderCount,complaintOrderCount,seekOrderCount)}
              numColumns={3}
              ItemSeparatorComponent={() => <ListSeparator height={10} backgroundColor={"transparent"} />}
            />
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  bg_mine: {
    width: "100%",
    height: windowWidth * 365 / 750,
  },
  edit: {
    width: 85,
    height: 28,
    borderBottomLeftRadius: 14,
    borderTopLeftRadius: 14,
    backgroundColor: "#3FC377",
    ...commonStyles.center,
    alignSelf: "flex-end",
    marginTop: 5,
  },
  card: {
    width: windowWidth - 20,
    alignSelf: "center",
    borderRadius: 5,
    backgroundColor: "white",
    alignItems: "center",
    paddingBottom: 20,
    marginTop: 30,
    minHeight: 400,
  },
  menu: {
    ...commonStyles.center,
    width: "33.3%",
  },
  menu_container: {
    alignItems: "center",
    justifyContent: "center",
    borderRadius: 5,
    width: 98,
    height: 98,
  },
  avatar: {
    width: 58,
    height: 58,
    borderRadius: 29,
  },
  avatar_container: {
    flexDirection: "row",
    alignItems: "center",
    paddingLeft: 25,
  },
});
